<template>
  <div class="china-wrap">
    <div class="map-container" id="liaoning" ref="liaoning" style="height:100%;width:100%,border: 1px solid #EAEAEB">
    </div>
  </div>
</template>

<script>
import liaoningJson from "@/utils/map/liaoning.json"; // json辽宁省地图数据引入
// import chinaJson from "@/utils/map/china_2.json"; // json数据引入

export default {
  // 组件名称
  name: "liaoNing",
  // 组件状态值
  data() {
    return {
      mapChart: "",
      option: {
        series: {
          type: "map",
          map: "liaoningMap", // 地图数据
          roam: true, // 设置允许缩放以及拖动的效果
          label: {
            show: true, // 展示标签, 显示省份名称
          },
          zoom: 1, // 设置初始化的缩放比例
          // center: [108.94, 34.46], // 设置地图中心点的坐标
          itemStyle: {
            normal: {
              areaColor: "#5B86FB",
              borderColor: "#F87E2B",
              borderWidth: 1,
            },
            emphasis: {
              color: "#ffffff",
              areaColor: "#87ADFC",
            },
          },
        },
      },
    };
  },
  mounted() {
    this.$echart.registerMap("liaoningMap", liaoningJson);
    this.getLineChart();
  },
  methods: {
    getLineChart() {
      this.mapChart = this.$echart.init(document.getElementById("liaoning"));
      this.mapChart.setOption(this.option);
      this.mapChart.on("click", (params) => {
        console.log(params);
      });
    },
  },
};
</script> 

<style lang="less" scoped>
.china-wrap {
  width: 100%;
  height: 100%;
}
</style>